<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue.js学习</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
		<script src="js/jquery/jquery-3.2.1.min.js"></script>
	</head>
	<body>
		<div id="app">
			{{ message }}
			<p v-html="message"></p>
			<div v-bind:id="dynamicId"></div><br>
			<button v-bind:disabled="isButtonDisabled">button</button><br>
		</div>
		
		<div id="app-2">
			<span v-bind:title="message">
				{{ content }}
			</span>
		</div>
		
		<div id="app-3">
			<p v-if="seen">现在你看到我了</p>
			<p v-else>现在你没办法看到我了</p>
		</div>
		
		<div id="app-4">
			<ol>
				<li v-for="(todo, index) in todos">
					index - {{ index }} - {{ todo.text }}
				</li>
			</ol>
		</div>
		
		<div id="app-5">
			<p>{{ message }}</p>
			<p>{{ reversedMessage1 }}</p>
			<p>{{ reversedMessage3() }}</p>
			<button v-on:click="reverseMessage2()">逆转消息</button>
		</div>
		
		<div id="app-6">
			<p>{{ message }}</p>
			<input v-model="message"/>
		</div>
		
		<div id="app-7">
			<ol>
				<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
			</ol>
		</div>
		
		<div id="app-8" class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
			Class 与 Style 绑定
		</div>
	</body>
	<script type="text/javascript">
		
		var app = new Vue({
			el: '#app',
			data: {
				message: '<span style="color:blue">hello qishon vue.js !</span>',
				dynamicId: '666div',
				isButtonDisabled: true
			}
		});
		$("#666div").text('set div 666 html');
		
		var app2 = new Vue({
			el: '#app-2',
			data: {
				content: '鼠标悬停几秒钟查看此处动态绑定的提示信息！',
				message: '页面加载于：' + new Date().toLocaleString()
			}
		});

		var app3 = new Vue({
			el: '#app-3',
			data: {
				seen: false
			}
		});
		
		var app4 = new Vue({
			el: '#app-4',
			data: {
				todos: [
					{ text: '学习 JavaScript' },
					{ text: '学习 angularjs' },
					{ text: '学习 jQuery' },
					{ text: '学习 Vue' }
				]
			}
		});
		
		var app5 = new Vue({
			el: '#app-5',
			data: {
				message: 'Hello Vue.js !'
			},
			computed: {
				reversedMessage1 () {
					return this.message.split('').reverse().join('');
				}
			},
			methods: {
				reverseMessage2 () {
					this.message = this.message.split('').reverse().join('');
				},
				reversedMessage3 () {
					return this.message.split('').reverse().join('');
				}
			}
		});
		
		var app6 = new Vue({
			el: '#app-6',
			data: {
				message: 'hello vue.js !'
			}
		});
		
		Vue.component('todo-item', {
			props: ['todo'],
			template: '<li>{{ todo.text }}</li>'
		});
		
		var app7 = new Vue({
			el: '#app-7',
			data: {
				groceryList: [
					{ id: 0, text: '蔬菜' },
					{ id: 1, text: '水果' },
					{ id: 2, text: '酸奶' }
				]
			}
		});
		
		new Vue({
		  data: {
		    num: 666
		  },
		  created: function () {
		    // `this` 指向 vm 实例
		    console.log('num is: ' + this.num)
		  }
		});
		
		var app8 = new Vue({
			el: '#app-8',
			data: {
				isActive: true,
				hasError: true
			}
		});
	</script>
</html>
